<template>
  <view class="container">
    <!-- 顶部地区选择和搜索框 -->
    <view class="header">
      <!-- 地区选择按钮 -->
      <view class="location" @click="showCityPicker">
        <text>{{currentCity || '选择城市'}}</text>
        <uni-icons type="arrowdown" size="16" color="#333"></uni-icons>
      </view>
      
      <!-- 搜索框 -->
      <view class="search-box">
        <uni-icons class="search-icon" type="search" size="18" color="#999"></uni-icons>
        <input 
          class="search-input" 
          placeholder="请输入搜索内容" 
          placeholder-class="placeholder"
          @confirm="onSearch"
        />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="swiper" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <image class="swiper-img" :src="item" mode="widthFix"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      currentCity: '北京市', // 默认显示城市
      swiperList: [
        '/static/liantiku.jpg',
        '/static/woyaoshangke.jpg',
        '/static/woyaokaoshi.jpg'
      ]
    }
  },
  methods: {
    // 显示城市选择器
    showCityPicker() {
      uni.showActionSheet({
        itemList: ['北京市', '上海市', '广东省', '深圳市', '四川省'],
        success: (res) => {
          this.currentCity = ['北京市', '上海市', '广州市', '深圳市', '成都市'][res.tapIndex]
        }
      })
    },
    // 搜索功能
    onSearch(e) {
      console.log('搜索内容:', e.detail.value)
      uni.showToast({
        title: '搜索: ' + e.detail.value,
        icon: 'none'
      })
    }
  }
}
</script>

<style>
  .container {
    padding: 20rpx;
  }
  
  /* 顶部栏样式 */
  .header {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    margin-bottom: 20rpx;
  }
  
  /* 地区选择样式 */
  .location {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  /* 搜索框样式 */
  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
    margin-left: 20rpx;
  }
  
  .search-icon {
    margin-right: 10rpx;
  }
  
  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }
  
  .placeholder {
    color: #999;
    font-size: 28rpx;
  }
  
  /* 轮播图样式 */
  .swiper {
    width: 100%;
    height: 350rpx;
    border-radius: 16rpx;
    overflow: hidden;
  }
  
  .swiper-img {
    width: 100%;
    height: 100%;
  }
</style>